﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二维码生成</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
    background-color: #262626;       
    }
    #box{
        width:1000px;
        height:600px;
        margin:200px auto;
    }
    #box .qrcode{
        width:400px;
        height: 400px;
        float: left;
        margin: 40px 40px;
    }
    #box .introduce{
        width:500px;
        height: 600px;
        float: left;
    }
    .introduce p{
        width:200px;
        height: 40px;
        background: #333; 
        float: left;
        margin:10px 20px;
        color:#fff;
        border-radius: 5px;
        overflow: hidden;
    }
    .introduce p span{
        float: left;
        width:50px;
        height:40px;
        color:#fff;
        text-align: center;
        line-height: 40px;
    }
    .introduce p input{
        width:150px;
        height:40px;
        float: left;
        border: 0;
        color:#fff;
        background:#000;
        text-indent:10px; 
        outline: none;
    }
    .introduce .btn{
        width:440px;
        height:40px;
        text-align: center;
        line-height: 40px;
        background: #6c0;
    }
	.qrcode>img{
		display: block;border:5px solid white;
	}
    </style>
</head>
<body>
    <div id="box">
		<h3 style="color: aliceblue">请用微信搜生成的二微码，查看效果</h3>
        <div class="introduce">
            <p>
                <span>姓名：</span>
                <input type="text" id="name" value="光头强">
            </p>
            <p>
                <span>公司：</span>
                <input type="text" id="company" value="李老板伐木有限公司">
            </p>
            <p>
                <span>职务：</span>
                <input type="text" id="title" value="伐木员">
            </p>
            <p>
                <span>地址：</span>
                <input type="text" id="address" value="黑龙江省哈尔滨市南唐镇狗熊岭">
            </p>
            <p>
                <span>手机：</span>
                <input type="text" id="mobile" value="13818585858">
            </p>
            <p>
                <span>邮箱：</span>
                <input type="text" id="email" value="guangtouqiang@163.com">
            </p>
            <p>
                <span>网址：</span>
                <input type="text" id="web">
            </p>
            <p>
                <span>备注：</span>
                <input type="text" id="desc" >
            </p>
            <p class="btn">开启通讯录</p>
        </div>
        <div class="qrcode" id="qrcode"></div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/qrcode.js"></script>
    <script>
    var name, company, title, address, mobile, email, web, desc;
	$(".btn").click(function() {
				name = "FN:" + $("#name").val() + "\n";
				company = "ORG:" + $("#company").val() + "\n";
				title = "TITLE:" + $("#title").val() + "\n";
				address = "WORK:" + $("#address").val() + "\n";
				mobile = "TEL:" + $("#mobile").val() + "\n";
				email = "EMAIL:" + $("#email").val() + "\n";
				web = "URL:" + $("#web").val() + "\n";
				desc = "NOTE:" + $("#desc").val() + "\n";

				var info = "BEGIN:VCARD\n" + name + company + title + address + mobile + email + web + desc + "END:VCARD";
				//console.log(info);
				//生成二维码
				var qrcode = new QRCode("qrcode");
				qrcode.makeCode(info);

    })
</script>
</body>
</html>